<template>
  <div>
   <van-nav-bar
  title="黑马头条"
  fixed
  placeholder
/>
<!-- 表单 -->
<van-form @submit="onSubmit">
  <van-field
    v-model="form.mobile"
    label="手机号"
    placeholder="手机号"
    required
    :rules="[{ required: true, message: '请填写13位手机号', pattern:/^1[3-9]\d{9}$/}]"
  />
  <van-field
    v-model="form.code"
    label="验证码"
    placeholder="验证码"
    required
    :rules="[{ required: true, message: '请填写6位正确验证码' ,pattern : /^\d{6}$/ }]"
  />
  <div style="margin: 16px;">
    <van-button   :disabled='isBtn' :loading='isBtn' loading-text="加载中" round block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { userLogin } from '@/api'
import { setToken } from '@/utils/token.js'

export default {
  data () {
    return {
      form: {
        mobile: '13888888888',
        code: '246810'
      },
      isBtn: false
    }
  },
  methods: {
    async  onSubmit () {
      this.isBtn = true
      try {
        const res = await userLogin({ ...this.form })
        setToken(res.data.data.token)
        this.$notify({
          type: 'success',
          message: '登陆成功',
          duration: 2000
        })
        this.isBtn = false
        this.$router.push({
          path: '/layout'
        })
      } catch (err) {
        console.log(err)
        this.$notify({
          type: 'danger',
          message: '登陆失败',
          duration: 2000
        })
        this.isBtn = false
      }
    }

  }
}
</script>

<style>

</style>
